<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input v-model="query" />
      <transition-group
        name="staggered-fade"
        tag="ul"
        :class="false"
        :before-enter="beforeEnter"
        :enter="enter"
        :leave="leave"
      >
        <li
          v-for="(item,index) in computedList"
          :key="item.msg"
          :data-index="index"
        >
          {{item.msg}}
        </li>
      </transition-group>
    </div>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/velocity/2.0.6/velocity.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          query: "",
          list: [
            { msg: "Bruce Lee" },
            { msg: "Jackie Chan" },
            { msg: "Chuck Norris" },
            { msg: "Jet Li" },
            { msg: "Kung Fury" },
          ],
        },
        computed: {
          computedList: function () {
            var vm = this;
            return this.list.filter(function (item) {
              return (
                item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
              );
            });
          },
        },
        methods: {
          beforeEnter: function (el) {
            el.style.opacity = 0;
            el.style.height = 0;
          },
          enter: function (el, done) {
            var delay = el.dataset.index * 150;
            setTimeout(function () {
              Velocity(el, { opacity: 1, height: "1.6em" }, { complete: done });
            }, delay);
          },
          leave: function (el, done) {
            var delay = el.dataset.index * 150;
            setTimeout(function () {
              Velocity(el, { opacity: 0, height: 0 }, { complete: done });
            }, delay);
          },
        },
      });
    </script>
  </body>
</html>
